<template>
	<!-- 答题卡 -->
	<view class="content base-con-bg">
		<nav-bar :leftText="title || $store.getters.getKeMuName" leftType="3" bgColor="#FFE8CA"></nav-bar>
		<view class="sheet-title">
			<view class="name" v-if="subtitle">{{subtitle}}</view>
			<view class="name" v-else-if="DEPTBYKEMULIST && question && DEPTBYKEMULIST[question[0]] && DEPTBYKEMULIST[question[0]].s && DEPTBYKEMULIST[question[0]].s[question[1]] && DEPTBYKEMULIST[question[0]].s[question[1]].s && DEPTBYKEMULIST[question[0]].s[question[1]].s[question[2]]">{{DEPTBYKEMULIST[question[0]]?.s[question[1]]?.s[question[2]]?.n}}</view>
			<view v-else></view>
			<view class="reform" @click="restart">重做</view>
		</view>
		<view class="type-options">
			<view class="row">
				<view class="label">题型：</view>
				<view class="type-list">
					<view @click="typeClick(0,index)" class="item" :class="{'on': questionType==index}" v-for="(item,index) in questionList" :key="index">{{item}}</view>
				</view>
			</view>
			<view v-if="!isError" class="row">
				<view class="label">分类：</view>
				<view class="type-list">
					<view @click="typeClick(1,index)" class="item" :class="{'on': classifyType==index}" v-for="(item,index) in classifyList" :key="index">{{item}}</view>
				</view>
			</view>
			<view class="row">
				<view class="label">模式：</view>
				<view class="type-list">
					<view @click="typeClick(2,index)" class="item" :class="{'on': exercisePattern==(index+1)}" v-for="(item,index) in patternList" :key="index">{{item}}</view>
				</view>
			</view>
			<view v-if="isError" class="row">
				<view class="label">移除：</view>
				<view class="type-list">
					<view @click="typeClick(3,index)" class="item" :class="{'on': errorType==index}" v-for="(item,index) in errorList" :key="index">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="topic-list">
			<view class="item" @click="itemClick(item)" :class="getItemClass(item)" v-for="(item,index) in filterList" :key="index">{{item.index+1}}</view>
		</view>
		<view class="statistics">
			已做题正确率
			<view class="num">{{statistics?.accuracy}}</view>
			 %，题量{{SUBJECTBYDEPT?.length}}题，答{{statistics?.all}}道，对{{statistics?.right}}题，错{{statistics?.wrong}}题 
		</view>
		<servicePopup @serviceClick="goAnalyse" v-if="aiAnalyze"></servicePopup>
	</view>
</template>

<script>
	import servicePopup from "@/components/servicePopup.vue"
	export default {
		components: {
			servicePopup
		},
		data() {
			return {
				type: '1',//1答题卡 2错题 3收藏
				questionList: ['全部','A1/A2型题','A3/A4型题'],//题型
				classifyList: ['全部','做错的','未做的','已做的','有笔记'],//分类
				patternList: ['练习模式','快速模式','背题模式','快考模式'],//模式
				errorList: ['不移除','做对1次','做对2次','做对3次'],//模式
				questionType: 0,//题型
				classifyType: 0,//分类
				errorType: 0,//移除
				statistics: {
					accuracy: 0,
					all: 0,
					right: 0,
					wrong: 0,
				},
				title: '',
				subtitle: '',
				isOldValue: false,//要显示历史做题答案
				aiAnalyze: '',//是否显示AI分析
				aiAnalyzeId: '',//
			}
		},
		watch: {
			exerciseList: {
				handler(newVal){
					console.log(newVal,'watch---exerciseList')
					if(newVal?.length>0){
						const list=this.SUBJECTBYDEPT;
						const right=list.filter((item,index)=>item.value==newVal[index]).length;
						const wrong=list.filter((item,index)=>item.value!=newVal[index] && newVal[index]).length;
						Object.assign(this.statistics,{
							accuracy: (right+wrong)===0 ? 0 : (right/(right+wrong)*100).toFixed(2),
							all: right+wrong,
							right,
							wrong,
						})
					}
				},
				deep: true,
			},
			isOldValue(newVal){
				console.log(newVal,'----isOldValue')
				this.getUserValue()
			},
			SUBJECTBYDEPT: {
				handler(newVal){
					if(this.isOldValue){
						this.getUserValue()
					}
				},
				deep: true
			}
		},
		computed: {
			SUBJECTBYDEPT() {
				return this.$store.state.SUBJECTBYDEPT;
			},
			DEPTBYKEMULIST() {
				return this.$store.state.DEPTBYKEMULIST;
			},
			question() {
				return this.$store.state.question;
			},
			exerciseList() {
				return this.$store.state.exerciseList;
			},
			sheetTitle() {//页面标题
				return this.$store.state.sheetTitle;
			},
			patternTypeList() {//每道题使用的模式
				return this.$store.state.patternList;
			},
			exercisePattern() {//答题模式
				return this.$store.state.exercisePattern;
			},
			isError() {//是否是错题进入
				return this.$store.state.isError;
			},
			filterList(){
				if (!this.SUBJECTBYDEPT) return [];
				let list=this.SUBJECTBYDEPT.map((item,index)=>{
					item.index=index;
					return item
				})
				return this.SUBJECTBYDEPT.filter((item,index) => {
						const exl=this.exerciseList;
						const classt=this.classifyType;
						const errort=this.errorType;
						const question=this.questionType===1 ? !item.content.trim() : this.questionType===2 ? item.content.trim() : true;
						const classify=classt===1 ? (item.value!=exl[index] && exl[index]) : classt===2 ? !exl[index] : classt===3 ? exl[index] : classt===4 ? !!item.haveComment : true;
						
						const errortf=this.errorType===1 ? item.rightNum!='1' : this.errorType===2 ? item.rightNum!='2' : this.errorType===3 ? item.rightNum!='3' : true;
						if(this.isError){
							return question && classify && errortf
						}else{
							return question && classify
						}
				    });
			},
		},
		onLoad(options) {
			console.log(options,'-----options')
			this.type=options.type || '1';
			this.title=options.title;//如果有传进来的title就显示
			this.subtitle=options.subtitle;
			if(this.sheetTitle.length>0){
				this.title=this.sheetTitle[0];
				this.subtitle=this.sheetTitle[1];
			}
			this.aiAnalyze=options.aiAnalyze=='1';
			this.aiAnalyzeId=options.id;
			this.isOldValue=options.isOldValue=='1';
		},
		onUnload() {
			this.$store.commit('set',['sheetTitle',[]])
		},
		onShow() {
			
		},
		methods: {
			goAnalyse(){
				uni.navigateTo({
					url: `/pagesA/aiAccuracy/analyse?sid=${this.aiAnalyzeId}`
				})
			},
			getUserValue(){
				const list=this.SUBJECTBYDEPT?.map(item=>item.userValue);
				this.$store.commit('set',['exerciseList',list])
			},
			typeClick(type,index){
				if(type===0){//题型
					this.questionType=index;
				}else if(type===1){//分类
					this.classifyType=index;
				}else if(type===2){//模式
					this.$store.commit('set',['exercisePattern',index+1])
					uni.setStorageSync('exercisePattern',index+1);
				}else if(type===3){//移除
					this.errorType=index;
				}
			},
			getItemClass(item){
				if(!this.exerciseList[item.index]){
					return ''
				}else if(item?.value==this.exerciseList[item.index]){
					return 'on1'
				}else{
					return 'on2'
				}
			},
			itemClick(item){
				this.$store.commit('set',['sheetIndex',item.index]);
				console.log(this.$store.state.sheetIndex,'-----sheetIndex')
				uni.navigateTo({
					url: `/pagesB/exercise/index`
				})
			},
			restart(){
				this.$store.commit('set',['sheetIndex',-1]);
				this.$store.commit('set',['exerciseList',new Array(this.SUBJECTBYDEPT.length)]);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.sheet-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 66rpx;
		padding: 0 20rpx 0 36rpx;
		font-size: 24rpx;
		color: #444;
		background-color: #F8F8F8;
		.reform{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 76rpx;
			height: 40rpx;
			cursor: pointer;
			font-size: 20rpx;
			color: #487CCE;
			border-radius: 20rpx;
			border: 2rpx solid #487CCE;
		}
	}
	.type-options{
		padding: 20rpx 10rpx 4rpx 36rpx;
		border-bottom: 10rpx solid #F8F8F8;
		font-size: 24rpx;
		.row{
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;
		}
		.label{
			color: #999;
		}
		.type-list{
			display: flex;
		}
		.item{
			padding: 4rpx 16rpx;
			margin-right: 4rpx;
			border-radius: 20rpx;
			color: #333;
			&.on{
				background-color: #FF9813;
				color: #fff;
			}
			&:last-child{
				margin-right: 0;
			}
		}
	}
	.topic-list{
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx 34rpx 80rpx;
		font-size: 30rpx;
		color: #333;
		.item{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 82rpx;
			height: 82rpx;
			margin-right: 38rpx;
			margin-bottom: 32rpx;
			cursor: pointer;
			border-radius: 50%;
			background-color: #F8F8F8;
			&:nth-child(6n){
				margin-right: 0;
			}
			&.on1,&.on2{
				color: #fff;
			}
			&.on1{
				background-color: #48CA8C;
			}
			&.on2{
				background-color: #FD665F;
			}
		}
	}
	.statistics{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 111;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		font-size: 20rpx;
		color: #404040;
		background-color: #EFEFEF;
		.num{
			color: #50BB88;
		}
	}
</style>
